// 单人/群聊通用部件。可嵌入至视图中，做二次开发。

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2

import com.yihu.xchat.enum 1.0
import com.yihu.xchat.model 1.0
import com.yihu.xchat.util 1.0

import "../../js/widget/ChatBox.js" as Js
import "../menu" as Menus

Rectangle {
    id: chattingWidget

    property var setSessionView: Js.setSessionView

    // 封装属性，对外部不可见
    Item {
        id: props

        property var sessionView                // 会话所属的视图
        property var audioRecorderDlg: null     // 离线录音窗口引用，单件
        property var videoRecorderDlg: null     // 在离线录象窗口引用，单件
    }

    SplitView {
        anchors.fill: parent

        resizing: true
        orientation: Qt.Vertical

        // 消息区域
        Rectangle {
            id: messageRect

            width: parent.width
            Layout.fillHeight: true
            Layout.minimumHeight: 300

            //color: "lightblue"
            color: "white"
            border.width: 1
            border.color: "lightgray"

            ListView {
                id: messageListView
                objectName: "chatView"

                spacing: 10

                anchors.fill: parent
                anchors.margins: 5
                width: parent.width

                ScrollBar.vertical: ScrollBar {
                    active: true
                }

                delegate: Bubble {
                    width: parent.width

                    property bool self: model.modelData.senderJid == LocalUserSingleton.bareJid

                    photo: model.modelData.senderPhoto
                    message: model.modelData.content
                    messageType: model.modelData.contentType
                    timestamp: model.modelData.time
                    floatRight: self
                    maxWidth: messageListView.width / 2

                    // 加载后，连接信号
                    Component.onCompleted: {
                        //console.debug("Connect bubble signal.");
                        messageDoubleClicked.connect(Js.onMessageDoubleClicked);
                    }

                    // 销毁后，断开信号
                    Component.onDestruction: {
                        //console.debug("Disconnect bubble signal.");
                        messageDoubleClicked.disconnect(Js.onMessageDoubleClicked);
                    }
                }
            }
        }

        // 工具栏及输入框
        Rectangle {
            id: editorRect

            width: parent.width
            height: 200

            Layout.minimumHeight: 150

            // 文本编辑工具栏
            Rectangle {
                id: toolbarRect

                border.color: "#EEEEEE"
                border.width: 1

                width: parent.width
                height: 32

                Row {
                    anchors.verticalCenter: parent.verticalCenter

                    x: 20
                    spacing: 20

                    // 发送图片
                    Image {
                        source: "qrc:/images/editor_image.png"

                        width: 24
                        height: 20

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                fileDialog.visible = true;
                            }
                        }
                    }

                    // 发送截图
                    Image {
                        source: "qrc:/images/editor_grap.png"

                        width: 24
                        height: 24

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                ScreenshotSingleton.shootScreen(true);
                            }
                        }

                        Component.onCompleted: {
                            ScreenshotSingleton.screenshotCompleted.connect(function(filePath){
                                Js.sendImageMessage("file://" + filePath);
                            });
                        }
                    }

                    // 音频
                    Image {
                        source: "qrc:/images/editor_audio.png"

                        width: 24
                        height: 24

                        Menu {
                            id: audioMenu
                            MenuItem{
                                text: qsTr("离线音频");
                                onTriggered: {
                                    if(!props.audioRecorderDlg){
                                        var component = Qt.createComponent("../dialog/AudioRecorderDialog.qml");

                                        props.audioRecorderDlg = component.createObject(chattingWidget);
                                        props.audioRecorderDlg.recordCompleted.connect(function(fileName){
                                            Js.sendAudioMessage(fileName);
                                        });
                                    }

                                    props.audioRecorderDlg.show();
                                }
                            }

                            MenuItem{
                                text: qsTr("在线音频通话");
                                onTriggered: {

                                }
                            }
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                audioMenu.popup();
                            }
                        }
                    }

                    // 视频
                    Image {
                        source: "qrc:/images/editor_video.png"

                        width: 20
                        height: 24

                        Menu {
                            id: videoMenu
                            MenuItem{
                                text: "离线视频"
                                onTriggered: {
                                    if(props.videoRecorderDlg === null){
                                        var component = Qt.createComponent("../dialog/VideoRecorderDialog.qml");
                                        //console.info(component.errorString());
                                        props.videoRecorderDlg = component.createObject(chattingWidget);
                                    }

                                    props.videoRecorderDlg.name = props.sessionView.sessionModel.name;
                                    props.videoRecorderDlg.showIt();
                                }
                            }

                            MenuItem{
                                text: "在线视频通讯"
                                onTriggered: {
                                }
                            }
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                videoMenu.popup();
                            }
                        }
                    }
                }
            }

            // 消息文本输入
            Rectangle{
                id: inputRect

                anchors.top: toolbarRect.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: buttonRect.top

                TextArea {
                    id: messageInputArea

                    //anchors.margins: 5
                    anchors.fill: parent

                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere

                    text: "This message is sent from XChat, a client of XMPP."

                    Keys.onReturnPressed: {
                        Js.sendTextMessage();
                    }

                    Keys.onEnterPressed: {
                        Js.sendTextMessage();
                    }
                }
            }

            // 按钮
            Rectangle {
                id: buttonRect

                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                height: 32
                width: parent.width

                Button {
                    anchors.right: parent.right

                    text: "发送"

                    onClicked: {
                        Js.sendTextMessage();
                    }
                }
            }
        }
    }

    // 文件对话框
    FileDialog {
        id: fileDialog
        title: "Select Image"
        nameFilters: [ "图片文件(*.jpg *.png *.jpeg)"]
        onAccepted: {
            Js.sendImageMessage(fileDialog.fileUrls.toString());
        }
        onRejected: {
            console.log("Canceled")
        }
    }

    // 消息对话框
    MessageDialog{
        id: messageDialog

        visible: false
    }
}
